import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ScrollView")

    Rectangle {
        x:0
        y:10
        width: 200
        height: 200

        color: "transparent";
        visible: true

        ScrollView {
            id:sc
            property ScrollBar hScrollBar: ScrollBar.horizontal
            property ScrollBar vScrollBar: ScrollBar.vertical

            ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn

            anchors.fill: parent
            visible: true

            contentWidth: m_child.width
            contentHeight: m_child.height


            clip: true

            Rectangle {
                id:m_child
                width: 800
                height: 800

                color: "blue"

                GridLayout {
                    anchors.fill: parent
                    columns: 3
                    Text {
                        id: m_testBtn
                        text: qsTr("测试区域")
                    }

                    Button {
                        text: "A"
                        property bool flag: false;
                        onClicked: {

                        }
                    }

                    Button {
                        property bool flag: false;
                        text: "B"
                        onClicked: {

                        }
                    }

                    Button {
                        text:"C"
                        onClicked: {
                        }
                    }

                    Button {
                        text: "D"
                        onClicked: {

                        }
                    }

                    Button {
                        text: "E"
                        onClicked: {
                        }
                    }
                }
            }
        }

        /* 为何不把MouseArea放到ScrollView中？因为位置触发只能触发几次，就没了，是一个Qt bug */
        /* 记录点击位置，记录鼠标点位置，当移动时计算新的目标点x,y占总大小的比例即可 */

        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.RightButton
            property point pos;
            property point clickPos: "1,1"

            onPressed: {
                pos.x = sc.hScrollBar.position * sc.contentWidth; /* position = 底图的左上角点/底图总大小。最大值 = (contentWidth - width) / contentWidth */
                pos.y = sc.vScrollBar.position * sc.contentHeight;
                clickPos = Qt.point(mouse.x,mouse.y)
            }

            onPositionChanged: {
                var w = clickPos.x - mouse.x;
                var h = clickPos.y - mouse.y;

                var uw = pos.x + w;
                var uh = pos.y + h;

                /* 确保上下左右不出界 */
                if (uw < 0)
                    uw = 0;
                if (uh < 0)
                    uh = 0;

                if (uw > sc.contentWidth - sc.width)
                    uw = sc.contentWidth - sc.width;

                if (uh > sc.contentHeight - sc.height)
                    uh = sc.contentHeight - sc.height;

                sc.hScrollBar.position = uw / sc.contentWidth;
                sc.vScrollBar.position = uh / sc.contentHeight;
            }
        }
    }
}
